<template>
    <div class="FriendView">
        <SearchFriend
            v-model="searchValue"
            placeholder="搜索"
            shape="round"
            show-action
            @cancel="handleSearchCancel"
            @focus="handleSearchFocus"
            @blur="handleSearchBlur" />
        <template v-if="!isSearching">
            <Notification />    <!-- 好友请求通知和群通知 -->
            <van-tabs sticky color="#07C160">
                <van-tab title="好友">  
                    <Friends />      
                </van-tab>
                <van-tab title="分组">  
                    <Grouping />     
                </van-tab>
                <van-tab title="群聊">  
                    <GroupChat />    
                </van-tab>
            </van-tabs>
        </template>
    </div>
</template>

<script>
    import { eventBus, eventTypes } from "@/utils/event-bus";
    import { mapState } from "vuex";

    export default {
        name: "FriendView",
        data() {
            return {
                isSearching: false,
                searchValue: "",
                searchResult: []
            };
        },
        components: {
            Notification:   () => import("@/components/friend/notification.vue"),
            Friends:        () => import("@/components/friend/friends.vue"),
            Grouping:       () => import("@/components/friend/grouping.vue"),
            GroupChat:      () => import("@/components/friend/groupChat.vue"),
            SearchFriend:   () => import("@/components/friend/searchFriend.vue"),
        },
        computed: {
            ...mapState(['friendList']),
        },
        methods: {
            handleSearchFocus() {
                this.isSearching = true;
                eventBus.emit(eventTypes.HIDE_TABBAR);
            },
            handleSearchBlur() {
                this.isSearching = false;
                eventBus.emit(eventTypes.SHOW_TABBAR);
            },
            handleSearchCancel() {
                this.isSearching = false;
                eventBus.emit(eventTypes.SHOW_TABBAR);
            },
        }
    };
</script>

<style lang="less" scoped>
    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }
</style>
